<template>
	<view class="container">
		<view class="article-content">
			<view v-html="article">
			</view>
		</view>
		<view class="house-recommend">
			<view class="house-title">
				房源推荐
			</view>
			<HouseItem></HouseItem>
			<HouseItem></HouseItem>
		</view>
	</view>
</template>

<script>
	import HouseItem from '@/components/HouseItem.vue'
	export default {
		components: {
			HouseItem
		},
		data() {
			return {
				article: '<h1>123</h1><br/><p>321</p><br/><p>321</p><br/><p>321</p><br/><p>321</p><br/><p>321</p><br/><p>321</p><br/><p>321</p><br/><p>321</p>'
			};
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 5px;
	}

	.article-content {
		background-color: #fff;
		margin: 30upx 0;
		padding: 20upx;
		border-radius: 10upx;
		border: 1px solid #ddd;
		box-shadow: 0 1px 0 0 #ccc;
	}
	.house-recommend {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #fff;
		padding: 32upx;
		height: 620upx;
		.house-title{
			font-size: 36upx;
			font-weight: bold;
			color: #333444;
			margin-bottom: 15upx;
		}
	}
</style>
